<template>
    <div>
         <el-row v-for="(item,index) in floorlist" :key="index">
        <fieldset style="border:none;border-top:1px solid #e2e2e2;font-size:16px">
          <legend>{{item.floorNo}}楼</legend>
        </fieldset>
          <div
          v-for="items1 in item.roomList"
          :key="items1.roomId"
           @mouseover="hoverIndex = items1.roomId"
           @mouseout="hoverIndex = -1"
          :class="{'hoverBg':type==1 && items1.roomId==hoverIndex}"
          style="float:left;margin:0px 20px;height:200px;min-width: 80px;border: 1px solid #ccc;margin-bottom:8px; display: flex;position: relative;"
          @click="roomClick(items1)">
             <div
            style="margin:0px 2px;height:170px;"
            v-for="(items2,index2) in items1.pageList"
            :key="index2">
            <div v-for="(items3,index3) in items2.bedList" :key="index3" :class="{'borderred':type==2}">
              <img :src="items3.src" style="margin:5px;cursor:pointer;" :class="{'borderred':type==2}" @click="bedClick(items1,items3)"/>
            </div>
           </div>
            <p style="font-size: 13px;width:87px;text-align: center;position: absolute;bottom:0;">{{items1.roomno}}</p>
          </div>
      </el-row>
    </div>

</template>
<script>
export default {
    name:'RoomBedShow',
    props:{
        yuyue:Number,//是否是取消预约 2.是取消预约
        floorlist:Array,
        type:Number, //0,无点击 1,点击房间 2,点击床位
    },
    data(){
        return {
            src:require("../assets/wuchangimg/yiyuyue.png"),
            itemArr:['A','B','C','D'],
            hoverIndex: -1,
        }
    },
    methods:{
        roomClick(items1){
            if(this.type == 1){           
               let data = {
                   roomno:items1.roomno,
                   roomId:items1.roomId,
                   status:items1.status,
                   buildId:items1.buildId,
                   type:1
               }
               this.$emit("getChildRoomBedData",data) 
            }
        },
        bedClick(items1,items3){
            if(this.type == 2){
                //根据床位状态进行提示
                let data = {
                   bedno:items1.roomno+"-"+items3.bedNo,
                   bedid:items3.bedId,
                   status:items3.status,
                   type:2,
                   bedtype:items3,
                   roomInfo:items1
                }
               this.$emit('getChildRoomBedData',data) 
            }
        },

    },
    mounted(){
        console.log(this.floorlist);
        console.log(this.type);
    }


}
</script>
<style scoped  lang="scss">
    
   
 .hoverBg{
     background: #ccc;
 }
 
 .borderred :hover{
     border: 1px solid red;
 }
 .borderred{
     border: 1px solid white;
 }
 



    
    
</style>


